﻿
$(function () {
var allData= Server.docontent;
var total = allData.length;
var fengxian = risk.risk;
function objsortbyval(obj) {
  var keyArr = [],valArr = [];
  for (var key in obj) {
    keyArr.push(key);
    valArr.push(obj[key]);
  }
  for (var i = 0, len = valArr.length; i < len; i++) {
    for (var j = 0; j < len - i; j++) {
      var keyTemp, valTemp;
      if (valArr[j] < valArr[j + 1]) {
        valTemp = valArr[j];
        valArr[j] = valArr[j + 1];
        valArr[j+1] = valTemp;
        keyTemp = keyArr[j];
        keyArr[j] = keyArr[j + 1];
        keyArr[j+1] = keyTemp;
      }
    }
  }
  var newobj={};
  for(var i=0;i<valArr.length;i++){
    newobj['"'+keyArr[i]+'"']=valArr[i];
  }
  return newobj;
}
echarts_1();
echarts_2();
echarts_4();
echarts_31();
echarts_32();
echarts_33();
echarts_5();
echarts_6();
function echarts_1() {

         var paging={
        pageNum: 12,
        pageNow: 1,
        pageTotal:0,
        Data:allData,
        DataCount:allData.length,
        PageDataArray:[],
        ElementDiv:[],

        TotlePage: function(){
            // this.pageTotal=Math.ceil(this.DataCount/this.pageNum);
            // Math.ceil为向上取整
            if(this.DataCount%this.pageNum==0){
                this.pageTotal=parseInt(this.DataCount/this.pageNum);
            }
            else{
                this.pageTotal=parseInt(this.DataCount/this.pageNum+1);
            }
            //这两个都可以用，只不过第二个比较底层。第一个比较简单
            // console.log(this.pageTotal);计算出总页数
        },
        pageNowData: function (page) {
            var index = (page - 1) * this.pageNum;//转化为索引 但我在考虑是否为必要，是否可以直接对pagenow操作
            // console.log(typeof(index));
            // console.log(typeof(this.pageNow));
            this.PageDataArray = this.Data.slice(index, index + this.pageNum);//因为splice会对字符串本身产生影响，所以用slice
            // 思路为，一页显示pageNum组数据，page从第一页开始，但取数据从零开始
            //调用数据绑定的方法
            // PageDataArray为此页的数据集合
            // console.log(this.Data);
            this.DataToElement();
        },
    CreateElement: function () {
        /*动态创建10组元素*/
        // 只创建一次dom元素而不是每次取数据的时候都重新创建
        for (var i = 0; i < this.pageNum; i++) {
            var Data_parEle = document.createElement("div");
            Data_parEle.className = "title user-data";
            var ul_par = document.createElement("ul");
            for (var k = 0; k < 5; k++) {

                var li_child = document.createElement("li");
                var list = document.createElement("a");
                list.setAttribute("href","#")
                li_child.innerHTML = "";
                list.appendChild(li_child)
//                ul_par.appendChild(li_child);
                ul_par.appendChild(list);
            }
            // 建立10组div——ul——10*li，并将li设为ul的子集
            // appendChild() 追加子集
            Data_parEle.appendChild(ul_par);
            // 将ul设为div的子集
            document.getElementById("allnav").appendChild(Data_parEle);
            // 将创建的整套div设为 id为allnav的div中
            this.ElementDiv.push(Data_parEle);
//            console.log(this.ElementDiv);
            // push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
            Data_parEle.addEventListener("mouseover", function () {
                this.setAttribute("id", "userover");
            });
            Data_parEle.addEventListener("mouseleave", function () {
                this.setAttribute("id", "userleave");
            });
            // 添加用户交互事件 鼠标离开 鼠标进入
        }
    },
    DataToElement: function () {
        // 将原始数据中的true 显示为是、 false显示为否
        // 如果没有数据，隐藏没有数据的样式
        for (var i = 0; i < this.ElementDiv.length; i++) {
            var lichild = this.ElementDiv[i].children[0].children;
            if (this.PageDataArray[i] == undefined) {
                this.ElementDiv[i].style.display = "none";
            }
            else {
                this.ElementDiv[i].style.display = "inline-block";
                // 防止用户从数据不全的页回到数据完全的页而无法全部显示的bug
                var index = 0;
                 lichild[index].innerHTML = this.PageDataArray[i]['host'] //== true ? "是" : this.PageDataArray[i]['IP'] == false ? "否" : this.PageDataArray[i]['IP'];
                    lichild[index].innerHTML = this.PageDataArray[i]['host']
                    index++;


            }
        }
    },
        NumBerInfo:function(){
            document. getElementsByClassName ('totle')[0].children[0].innerHTML=this.pageTotal;
            // 将总页数给span赋值
            var btnNumber=document.getElementsByClassName('btnNumber')[0];
            // console.log(btnNumber);
            btnNumber.innerHTML=this.pageNumberli(this.pageNow,this.pageTotal);
            var oldcolor=btnNumber.children[0];
            oldcolor.style.backgroundColor = "#1D9DEE";
            oldcolor.style.color="white";
            // 默认的块的颜色为white  背景色为蓝色 （#1D9DEE）
//利用算法  实现块的颜色的改变 算法会创建各种块 比较难理解
            var that=this;
            btnNumber.onclick=function(){
                var new_li=event.target;
                // console.log(new_li.nodeName);
                // new_li.nodeName 为大写，所以要用大写判断
                if(new_li.nodeName=='LI'){
                    if(new_li.getAttribute('data-nobtn')){
                        return;
                        // 对于块 ' ... '直接跳过
                    }

                    oldcolor.style.backgroundColor="transparent";
                    oldcolor.style.color="black";
                    new_li.style.backgroundColor="#1D9DEE";
                    new_li.style.color='white';
                    oldcolor=new_li;
                    that.pageNow=new_li.innerHTML;
                    // console.log(new_li);
                    that.pageNowData(new_li.innerHTML);
                }// 用现在的颜色来替换之前的颜色


            }
            var downPage=document.getElementsByClassName('downPage')[0];
            // 下一页按钮
            downPage.onclick=function(){
                if(that.pageNow>=that.pageTotal){
                    return;
                    // 如果当前页为最大页数，返回，即不执行onclick
                }
                that.pageNow++;
                // console.log(that.pageNow);
                btnNumber.innerHTML=that.pageNumberli(that.pageNow,that.pageTotal);
                // 重新计算翻页按钮
                oldcolor = document.getElementById("libg");
                // 当前页的颜色已经写好
                that.pageNowData(that.pageNow);
                // 调用pageNowData() 来显示当前页的数据
            }
            var topPage=document.getElementsByClassName('topPage')[0];
            topPage.onclick=function(){
                // 下一页按钮  原理同上
                if(that.pageNow<=1){
                    // 如果当前页数小于等于1,不执行onclick
                    return;
                }
                that.pageNow--;
                btnNumber.innerHTML=that.pageNumberli(that.pageNow,that.pageTotal);
                oldcolor = document.getElementById("libg");
                that.pageNowData(that.pageNow);
            }
            var choose=document.getElementById('choose');
            // choose 为点击 跳转 来实现翻页功能
            var choose_value=document.getElementsByClassName('txtnum')[0];
            // console.log(choose_value.value);
            choose.onclick=function(){
                that.pageNowData(choose_value.value);
                btnNumber.innerHTML = that.pageNumberli(parseInt(choose_value.value), that.pageTotal);
                that.pageNow = parseInt(choose_value.value);
            }
        },
        pageNumberli:function(cur_page,totle_page){
// 翻页按钮的算法
// cur_page 为当前页数  totle_page为总页数
            var res = "";
            // 12345
            // 1...17 18 19 20
            // 1... 12 13 14 15 16...20
            // 没有判断的话，会直接建立总页数个页码块
             for (var i = 1; i <= totle_page; i++) {
                //  页数从第一页开始
                if (i == 2 && cur_page -2> 1) {//前缩页
                    // 根据规律，第一页和第十九页会直接显示出来
                    // cur_page - 5 > 1 代表缩页从当前页的后6页开始，且当前页数大于6时是才会缩页
                    i = cur_page - 2;//直接跳到当前页 -5 也就是开始缩页之后的地方
                    res += "<li data-nobtn='true'>...</li>";//显示缩页的符号
                }
                else if (i == cur_page + 2 && cur_page + 2 < totle_page) {//后缩页
                    i = totle_page - 1;
                    // 缩页位置在总页数的倒数第二个
                    // 其它按照前缩页理解
                    res += "<li data-nobtn='true'>...</li>";
                }
                else {
                    if (i == cur_page) {
                        res += "<li id='libg' style='background-color: #1D9DEE; color: white;'>" + i + "</li>";
                    }
                    else {
                        res += "<li>" + i + "</li>";
                    }
                }
            }
            return res;
        }
    }
    paging.TotlePage();
    paging.CreateElement();
    paging.pageNowData(1);//默认页数为1
    paging.NumBerInfo();
}

function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        var list = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['port'].length; i++) {
            if(allData[i]['port'][j]['state']== 'open'){
                      port = allData[i]['port'][j]['portid'];
                      list.push(port);
                      }
                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);

       option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow'}
    },
    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '4%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data:
//      		Object.keys(new_map),
      		(function(){
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 10){
            for(var i = 0; i < 10; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            })(),
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },

        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
               // rotate:50,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [
		{

        type: 'bar',
        data: (function(){
      		var rs = []
      		if(Object.keys(new_map).length > 10){
            for(var i = 0; i < 10; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            })(),
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#27d08a',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }
		
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));

       var list = [];
        for (var i = 0; i < fengxian.length; i++) {
        for(var j = 0; j < fengxian[i].length; j++) {
//        for(var k = 0; k < fengxian[i][j]['Vulnerability Type'].length; k++) {

                      Vulnerability_Type = fengxian[i][j];
                      list.push(Vulnerability_Type);
//}
                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);

       option = {
  //  backgroundColor: '#00265f',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },

    grid: {
        left: '0%',
		top:'10px',
        right: '0%',
        bottom: '2%',
       containLabel: true
    },
    xAxis: [{
        type: 'category',
      		data: (function(){
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            })(),
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },

        axisTick: {
            show: false,
        },
		axisLabel:  {
                interval: 0,
                rotate:20,
                show: true,
                splitNumber: 15,
                textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '10',
                },
            },
    }],
    yAxis: [{
        type: 'value',
        axisLabel: {
           //formatter: '{value} %'
			show:true,
			 textStyle: {
 					color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid"
            },
        },
        splitLine: {
            lineStyle: {
               color: "rgba(255,255,255,.1)",
            }
        }
    }],
    series: [{
        type: 'bar',
        data: (function(){
      		var rs = []
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            })(),
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }
	]
};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	
function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));

    var list = [];
        var list1 = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['port'].length; i++) {
            if(allData[i]['port'][j]['state']== 'open'){
                      port = allData[i]['port'][j]['portid'];
                      list.push(port);
                      }
                      else if(allData[i]['port'][j]['state']== 'closed'){
                      port1 = allData[i]['port'][j]['portid'];
                      list1.push(port1);}
                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

                    var map1 = {};
                    for(var i = 0;i<list1.length;i++){
                    var s = list1[i];

//                    var r = map[s];
                    if(map1[s]){
                    map1[s] +=1;

                    }else{
                    map1[s] = 1;
                    }
                    }
                option = {
	    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#dddc6b'
            }
        }
    },
		    legend: {
    top:'0%',
        data:['open','closed'],
                textStyle: {
           color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    grid: {
        left: '10',
		top: '30',
        right: '10',
        bottom: '10',
        containLabel: true
    },

    xAxis: [{
        type: 'category',
        boundaryGap: false,
axisLabel:  {
                textStyle: {
 					color: "rgba(255,255,255,.6)",
					fontSize:12,
                },
            },
        axisLine: {
			lineStyle: {
				color: 'rgba(255,255,255,.2)'
			}

        },

   data: [9,21,22,23,80,135,443,1723,3306,3389,8080,10000,49152]

    }, {

        axisPointer: {show: false},
        axisLine: {  show: false},
        position: 'bottom',
        offset: 20,



    }],

    yAxis: [{
        type: 'value',
        axisTick: {show: false},
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
       axisLabel:  {
                textStyle: {
 					color: "rgba(255,255,255,.6)",
					fontSize:12,
                },
            },

        splitLine: {
            lineStyle: {
                 color: 'rgba(255,255,255,.1)'
            }
        }
    }],
    series: [
		{
        name: 'closed',
        type: 'line',
         smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

            normal: {
				color: '#0184d5',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(1, 132, 213, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(1, 132, 213, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
			itemStyle: {
			normal: {
				color: '#0184d5',
				borderColor: 'rgba(221, 220, 107, .1)',
				borderWidth: 12
			}
		},
        data: (function(){
        list = [9,21,22,23,80,135,443,1723,3306,3389,8080,10000,49152];
        l = [];
        var close = 0;

        for(var i = 0;i < list.length;i++){
for(var j = 0;j< Object.keys(map1).length;j++){

        if( list[i].toString() == Object.keys(map1)[j] ){

        close = Object.values(map1)[j];
        break;
        }
        else{
        close = 0;
        }}
        l.push(close);
        }
return l;
        })(),


    },
{
        name: 'open',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

            normal: {
				color: '#00d887',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 216, 135, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(0, 216, 135, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
			itemStyle: {
			normal: {
				color: '#00d887',
				borderColor: 'rgba(221, 220, 107, .1)',
				borderWidth: 12
			}
		},
        data: (function(){
        list = [9,21,22,23,80,135,443,1723,3306,3389,8080,10000,49152];
        l = [];
        var close = 0;

        for(var i = 0;i < list.length;i++){
for(var j = 0;j< Object.keys(map).length;j++){

        if( list[i].toString() == Object.keys(map)[j] ){

        close = Object.values(map)[j];
        break;
        }
        else{
        close = 0;
        }}
        l.push(close);
        }
return l;
        })(),

    }, 
	
		 ]

};
      
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));

       var list = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['os'].length; i++) {
                      os = allData[i]['os'][j]['name'];
                      list.push(os);

                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);
function os_name() {
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 5){
            for(var i = 0; i < 5; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            }
function os_number() {
      		var rs = []
      		if(Object.keys(new_map).length > 5){
            for(var i = 0; i < 5; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            }
rss = os_name();
rs = os_number();
        var dataStyle = {
	normal: {
		label: {
			show: false
		},
		labelLine: {
			show: false
		},
		//shadowBlur: 40,
		//shadowColor: 'rgba(40, 40, 40, 1)',
	}
};
var placeHolderStyle = {
	normal: {
		color: 'rgba(255,255,255,.05)',
		label: {show: false,},
		labelLine: {show: false}
	},
	emphasis: {
		color: 'rgba(0,0,0,0)'
	}
};
option = {
	color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
	tooltip: {
		show: true,
		formatter: "{a} : {c} "
	},
	legend: {
		itemWidth: 10,
        itemHeight: 10,
		itemGap: 12,
		bottom: '3%',

		data: rss,
		textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
	},

	series: [
		{
		name: rss[0],
		type: 'pie',
		clockWise: false,
		center: ['50%', '42%'],
		radius: ['59%', '70%'],
		itemStyle: dataStyle,
		hoverAnimation: false,
		data: [{
			value: rs[0],
			name: '01'
		}, {
			value: 20,
			name: 'invisible',
			tooltip: {show: false},
			itemStyle: placeHolderStyle
		}]
	},
		{
		name: rss[1],
		type: 'pie',
		clockWise: false,
		center: ['50%', '42%'],
		radius: ['49%', '60%'],
		itemStyle: dataStyle,
		hoverAnimation: false,
		data: [{
			value: rs[1],
			name: '02'
		}, {
			value: 30,
			name: 'invisible',
			tooltip: {show: false},
			itemStyle: placeHolderStyle
		}]
	},
		{
		name: rss[2],
		type: 'pie',
		clockWise: false,
		hoverAnimation: false,
		center: ['50%', '42%'],
		radius: ['39%', '50%'],
		itemStyle: dataStyle,
		data: [{
			value: rs[2],
			name: '03'
		}, {
			value: 35,
			name: 'invisible',
			tooltip: {show: false},
			itemStyle: placeHolderStyle
		}]
	},
		{
		name: rss[3],
		type: 'pie',
		clockWise: false,
		hoverAnimation: false,
		center: ['50%', '42%'],
		radius: ['29%', '40%'],
		itemStyle: dataStyle,
		data: [{
			value: rs[3],
			name: '04'
		}, {
			value: 40,
			name: 'invisible',
			tooltip: {show: false},
			itemStyle: placeHolderStyle
		}]
	},
		{
		name: rss[4],
		type: 'pie',
		clockWise: false,
		hoverAnimation: false,
		center: ['50%', '42%'],
		radius: ['20%', '30%'],
		itemStyle: dataStyle,
		data: [{
			value: rs[4],
			name: '05'
		}, {
			value: 50,
			name: 'invisible',
			tooltip: {show: false},
			itemStyle: placeHolderStyle
		}]
	}, ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_31() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb1'));
         var list = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['os'].length; i++) {
                      type = allData[i]['os'][j]['osclass'][0]['type'];
//                      if(type == 'router'|'webcam'|'printer')
                      list.push(type);

                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);
function os_name() {
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            }
function os_number() {
      		var rs = []
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            }
rss = os_name();
rs = os_number();
option = {

	    title: [{
        text: '设备类型',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {

top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:rss,
                textStyle: {
            color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'设备类型',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
                  color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
            label: {show:false},
			labelLine: {show:false},
            data:(function(){
            var k = [];
i=0
while(i<rss.length){
            k.push({
            name:rss[i],
            value:rs[i]
            });
            i++;
            }
            return k;
            })()
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_32() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb2'));
        var list = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['os'].length; i++) {
                      vendor = allData[i]['os'][j]['osclass'][0]['vendor'];
                      list.push(vendor);

                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);
function os_name() {
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            }
function os_number() {
      		var rs = []
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            }
rss = os_name();
rs = os_number();
option = {

	    title: [{
        text: '品牌分布',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {

    top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:rss,
                textStyle: {
           color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'品牌分布',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
            color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
            label: {show:false},
			labelLine: {show:false},
            data:(function(){
            var k = [];
i=0
while(i<rss.length){
            k.push({
            name:rss[i],
            value:rs[i]
            });
            i++;
            }
            return k;
            })()
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
function echarts_33() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb3'));
               var list = [];
        for (var i = 0; i < total; i++) {
        for(var j = 0; j < allData[i]['os'].length; i++) {
                      osfamily = allData[i]['os'][j]['osclass'][0]['osfamily'];
                      list.push(osfamily);

                  }
        }
        var map = {};
                    for(var i = 0;i<list.length;i++){
                    var s = list[i];

//                    var r = map[s];
                    if(map[s]){
                    map[s] +=1;

                    }else{
                    map[s] = 1;
                    }
                    }

new_map = objsortbyval(map);
function os_name() {
      		var rs = [];
      		var rss=[];
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push((Object.keys(new_map)[i]));
            }
            }
            else{
            rs = Object.keys(new_map);
            }
            for(var i in rs){
               rss.push(rs[i].replace(/\"/g, "")) ;
            }
            return rss;
            }
function os_number() {
      		var rs = []
      		if(Object.keys(new_map).length > 9){
            for(var i = 0; i < 9; i++){
                rs.push(Object.values(new_map)[i]);
            }
            }
            else{
            rs = Object.values(new_map);
            }

            return rs;
            }
rss = os_name();
rs = os_number();
option = {
	    title: [{
        text: '操作系统系列',
        left: 'center',
        textStyle: {
            color: '#fff',
			fontSize:'16'
        }

    }],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
position:function(p){   //其中p为当前鼠标的位置
            return [p[0] + 10, p[1] - 10];
        }
    },
    legend: {
    top:'70%',
       itemWidth: 10,
        itemHeight: 10,
        data:rss,
                textStyle: {
            color: 'rgba(255,255,255,.5)',
			fontSize:'12',
        }
    },
    series: [
        {
        	name:'操作系统系列',
            type:'pie',
			center: ['50%', '42%'],
            radius: ['40%', '60%'],
                   color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
            label: {show:false},
			labelLine: {show:false},
            data:(function(){
            var k = [];
i=0
while(i<rss.length){
            k.push({
            name:rss[i],
            value:rs[i]
            });
            i++;
            }
            return k;
            })()
        }
    ]
};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }


})




		
		
		


		









